<!DOCTYPE html>
<html>
<head>
	<title>表格斑马线</title>
</head>
<body>

	<style type="text/css">
		/*行的宽和高，同一行元素的固定间距，一格内的元素居中*/
		td{
			width: 400px;
			height: 40px;
			text-align: center;
		}
		/*表格格式，无列边框，固定行列间距*/
		table{
			table-layout: fixed;
			border-collapse: collapse;
		}
		/*白色背景行格式*/
		.tr1{
			background-color: white;
			border-bottom-color:lightgray;
			border-bottom-style: solid;
			border-bottom-width: 1px;
		}
		/*灰色背景行格式*/
		.tr2{
			background-color: whitesmoke;
			border-bottom-color:lightgray;
			border-bottom-style: solid;
			border-bottom-width: 1px;
		}
	</style>

	<table>
		<tr class="tr1">
			<td>id</td>
			<td>名称</td>
			<td>血量</td>
			<td>伤害</td>
		</tr>
		<tr class="tr2">
			<td>1</td>
			<td>gareen</td>
			<td>340</td>
			<td>58</td>
		</tr>
		<tr class="tr1">
			<td>2</td>
			<td>teemo</td>
			<td>320</td>
			<td>76</td>
		</tr>
		<tr class="tr2">
			<td>3</td>
			<td>annie</td>
			<td>380</td>
			<td>38</td>
		</tr>
		<tr class="tr1">
			<td>4</td>
			<td>deadbrother</td>
			<td>400</td>
			<td>90</td>
		</tr>
	</table>

</body>
</html>